<template>
  <div class="select-picker">
    <div class="picker-trigger" @click="toggleDropdown">
      <div class="selected-content">
        <component :is="selectedTypeIcon" :size="16" class="trigger-icon" />
        <span class="selected-text">{{ selectedTypeName }}</span>
      </div>
      <ChevronDown :size="16" class="chevron" :class="{ rotated: isOpen }" />
    </div>

    <div v-if="isOpen" class="dropdown-overlay" @click="closeDropdown"></div>

    <div v-if="isOpen" class="dropdown-content">
      <div class="type-list">
        <div
          v-for="type in fileTypes"
          :key="type.value"
          class="type-item"
          :class="{ selected: selectedType === type.value }"
          @click="selectType(type.value)"
        >
          <component :is="type.icon" :size="18" class="type-icon" />
          <div class="type-info">
            <div class="type-name">{{ type.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { File, Image, Video, Music, FileText, Archive, ChevronDown } from 'lucide-vue-next'

interface FileType {
  value: string
  name: string
  icon: any // eslint-disable-line @typescript-eslint/no-explicit-any
  count: number
}

interface Props {
  modelValue?: string
  fileCounts?: Record<string, number>
}

interface Emits {
  (e: 'update:modelValue', value: string): void
  (e: 'change', value: string): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: 'all',
  fileCounts: () => ({})
})

const emit = defineEmits<Emits>()

const selectedType = ref(props.modelValue)
const isOpen = ref(false)

const fileTypes = computed<FileType[]>(() => [
  {
    value: 'all',
    name: '全部类型',
    icon: File,
    count: Object.values(props.fileCounts).reduce((sum, count) => sum + count, 0)
  },
  {
    value: 'image',
    name: '图片',
    icon: Image,
    count: props.fileCounts.image || 0
  },
  {
    value: 'video',
    name: '视频',
    icon: Video,
    count: props.fileCounts.video || 0
  },
  {
    value: 'audio',
    name: '音频',
    icon: Music,
    count: props.fileCounts.audio || 0
  },
  {
    value: 'document',
    name: '文档',
    icon: FileText,
    count: props.fileCounts.document || 0
  },
  {
    value: 'archive',
    name: '压缩包',
    icon: Archive,
    count: props.fileCounts.archive || 0
  }
])

const selectedTypeInfo = computed(() => {
  return fileTypes.value.find((type) => type.value === selectedType.value) || fileTypes.value[0]
})

const selectedTypeName = computed(() => selectedTypeInfo.value.name)
const selectedTypeIcon = computed(() => selectedTypeInfo.value.icon)
const selectedTypeCount = computed(() => selectedTypeInfo.value.count)

const toggleDropdown = (): void => {
  isOpen.value = !isOpen.value
}

const closeDropdown = (): void => {
  isOpen.value = false
}

const selectType = (type: string): void => {
  selectedType.value = type
  emit('update:modelValue', type)
  emit('change', type)
  closeDropdown()
}

// 点击外部关闭下拉框
const handleClickOutside = (event: Event): void => {
  const target = event.target as HTMLElement
  if (!target.closest('.select-picker')) {
    closeDropdown()
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.select-picker {
  position: relative;
  width: 160px;
}

.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--border-color-light);
  border-radius: 6px;
  background-color: var(--background-color-secondary);
  color: var(--text-color-primary);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.picker-trigger:hover {
  border-color: var(--primary-color);
}

.selected-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.trigger-icon {
  color: var(--text-color-secondary);
}

.selected-text {
  font-size: 14px;
  font-weight: 500;
}

.type-count {
  font-size: 12px;
  color: var(--text-color-secondary);
}

.chevron {
  color: var(--text-color-secondary);
  transition: transform 0.3s ease;
}

.chevron.rotated {
  transform: rotate(180deg);
}

.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  margin-top: 4px;
  background-color: var(--background-color-secondary);
  border: 1px solid var(--border-color-light);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.type-list {
  max-height: 300px;
  overflow-y: auto;
}

.type-item {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border-color-light);
}

.type-item:hover {
  background-color: var(--background-color-tertiary);
}

.type-item.selected {
  background-color: var(--primary-color);
  color: white;
}

.type-item:last-child {
  border-bottom: none;
}

.type-icon {
  margin-right: 12px;
  color: var(--text-color-secondary);
}

.type-item.selected .type-icon {
  color: white;
}

.type-info {
  flex: 1;
}

.type-name {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 2px;
}

.type-count {
  font-size: 12px;
  opacity: 0.7;
}
</style>
